<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="tabs" :style="{ height: height + 'px' }">
    <div v-for="(item, i) in data" :key="i" :class="{ active: isActive(i) }" @click="handleTab(item, i)">
      {{ item }}
    </div>
    <div class="right" v-if="isRightBtn">

      <el-button
        type="primary"
        size="medium"
        round
        @click="
          () => {
            handleSave('save')
          }
        "
        >保存</el-button
      >
      <el-button
        type="success"
        size="medium"
        round
        @click="
          () => {
            handleSave('publish')
          }
        "
        >发布</el-button
      >
      <el-button
        v-if="microOpen === 'false'"
        type="warning"
        size="medium"
        round
        @click="
          () => {
            goBack()
          }
        "
        >返回</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    mData: {
      type: Object,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    height: {
      type: Number,
      default: 50
    },
    activeColor: {
      type: String,
      default: '#000000'
    },
    tab: {
      type: Number,
      default: 0
    },
    isRightBtn: {
      type: Boolean,
      default: true
    }
    // style: {
    //   type: Object,
    //   default: () => {}
    // }
  },
  data() {
    return {
      microOpen: 'false',
      tabs: this.tab
    }
  },
  watch: {
    tab(val) {
      this.tabs = val
    }
  },
  created() {
    this.microOpen = this.$route.query.microOpen ? this.$route.query.microOpen : this.microOpen
  },
  methods: {
    isActive(i) {
      return i === this.tabs
    },
    handleTab(item, index) {
      this.tabs = index
      this.$emit('on-tab', item, index)
    },
    handleSave(e) {
      this.$emit('on-save', e)
    },
    goBack() {
      this.$router.go(-1)
    },
  }
}
</script>

<style lang="scss" scoped>
.tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-bottom: 1px solid #fafafa;
  border-radius: 10px 10px 0 0;
  position: relative;
}
.tabs > div {
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(92, 92, 92, 0.5);
  border-bottom: 2px solid transparent;
  box-sizing: border-box;
}
.tabs > div.active {
  font-weight: 700;
  color: #000000;
  border-bottom: 2px solid #000;
}
.right {
  position: absolute;
  right: 0;
  top: 0;
}
</style>
